<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:ui="http://java.sun.com/jsf/facelets"> 

	<h:head>
		<title>Bank Customer Lookup (with onevent)</title>
		<link href="../08/css/styles.css" rel="stylesheet" type="text/css" />
		<script src="scripts/utils.js" type="text/javascript" /> 
	</h:head>
	<body> 
		<h:form>
			<fieldset>
				<legend>Bank Customer Lookup (with onevent)</legend>
				Customer ID:
					<h:inputText value="#{bankingBeanSlow.customerId}" />
					<br/>
				Password:
					<h:inputSecret value="#{bankingBeanSlow.password}" />
				
				<br/>
				
				<h:commandButton action="#{bankingBeanSlow.showBalance}" value="Show Current Balance" >
					<f:ajax execute="@form" render="ajaxMessage2" onevent="showWorkingIndicator"/>
				</h:commandButton>
				
				<br/>
				
				<h2>
					<span id="workingIndicator" style="display: none; font-size: 60%">
						<img src="../12-ajax/img/ajax-loader.gif"/>
						Loading data from server, please wait...
					</span>
					<br/>
					<h:outputText value="#{bankingBeanSlow.message}" id="ajaxMessage2"/>
				</h2>
			</fieldset>
		</h:form>
	</body> 
</html>
